/* =========================================================
   ЕНЛ — АККОРДЕОН СО СПИСКАМИ УРОКОВ
   ========================================================= */


/* =========================================================
   1. СЕКЦИЯ
   ========================================================= */

.enl-accordion-lessons-section {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    margin:
        22px 0 28px;
}


/* =========================================================
   2. ЗАГОЛОВОК АККОРДЕОНА
   ========================================================= */

.enl-accordion-lessons-toggle {
    position: relative;

    z-index: 20;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    min-height:
        52px;

    box-sizing:
        border-box;

    margin:
        0 !important;

    padding:
        8px 4px 10px 0 !important;

    color:
        #292929 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    cursor:
        pointer;

    transition:
        opacity 0.18s ease;
}


.enl-accordion-lessons-toggle > * {
    min-width:
        0;
}


/* =========================================================
   3. ЖЁЛТЫЙ МАРКЕР ПОД ЗАГОЛОВКОМ
   ========================================================= */

.enl-accordion-lessons-toggle::after {
    content: "";

    position:
        absolute;

    left:
        0;

    bottom:
        2px;

    z-index:
        -1;

    width:
        72px;

    height:
        7px;

    background:
        #DDDD84;

    border-radius:
        999px;

    transition:
        width 0.2s ease,
        opacity 0.2s ease;
}


.enl-accordion-lessons-section--open
> .enl-accordion-lessons-toggle::after {
    width:
        105px;
}


/* =========================================================
   4. ГОЛУБОЙ РОМБИК + ШЕВРОН
   ========================================================= */

/*
 * За счёт box-shadow круг визуально
 * превращается в мягкий ромб после
 * вращения стрелки.
 *
 * Сам шеврон специально сделан
 * более жирным.
 */

.enl-accordion-lessons-toggle::before {
    content: "";

    position:
        absolute;

    right:
        5px;

    top:
        50%;

    width:
        9px;

    height:
        9px;

    box-sizing:
        border-box;

    border-right:
        2.5px solid #292929;

    border-bottom:
        2.5px solid #292929;

    box-shadow:
        0 0 0 11px #DBECFF;

    border-radius:
        1px;

    transform:
        translate(-9px, -65%)
        rotate(45deg);

    transition:
        transform 0.2s ease,
        box-shadow 0.18s ease;

    pointer-events:
        none;
}


.enl-accordion-lessons-section--open
> .enl-accordion-lessons-toggle::before {
    transform:
        translate(-9px, -35%)
        rotate(225deg);
}


/* =========================================================
   5. HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .enl-accordion-lessons-section:not(
        .enl-accordion-lessons-section--locked
    )
    > .enl-accordion-lessons-toggle:hover {
        opacity:
            0.72;
    }

}


/* =========================================================
   6. STICKY
   ========================================================= */

.enl-accordion-lessons-section--open
> .enl-accordion-lessons-toggle {
    position:
        sticky;

    top:
        8px;

    z-index:
        60;

    background:
        rgba(253, 252, 243, 0.96) !important;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    padding-top:
        10px !important;

    padding-bottom:
        12px !important;
}


/* =========================================================
   7. LOCK
   ========================================================= */

.enl-accordion-lessons-section--locked
> .enl-accordion-lessons-toggle {
    color:
        rgba(41, 41, 41, 0.38) !important;

    cursor:
        default;

    opacity:
        1 !important;


    /*
     * Круг + замок одним SVG.
     *
     * Сам замок теперь НЕ прозрачный:
     * используется спокойный серый #888985.
     *
     * Поэтому стык корпуса и дужки
     * визуально чистый.
     */

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23292929' fill-opacity='.07'/%3E%3Cpath d='M12 14v-2.5a4 4 0 0 1 8 0V14' fill='none' stroke='%23888985' stroke-width='2.3' stroke-linecap='round'/%3E%3Crect x='9.5' y='13.5' width='13' height='10' rx='2' fill='%23888985'/%3E%3C/svg%3E") !important;

    background-size:
        32px 32px !important;

    background-position:
        right 5px center !important;

    background-repeat:
        no-repeat !important;
}


/*
 * В lock-состоянии обычную стрелку
 * полностью выключаем.
 */

.enl-accordion-lessons-section--locked
> .enl-accordion-lessons-toggle::before {
    content:
        none !important;
}


/*
 * Серый маркер вместо оливкового.
 */

.enl-accordion-lessons-section--locked
> .enl-accordion-lessons-toggle::after {
    content: "";

    position:
        absolute;

    left:
        0;

    bottom:
        2px;

    width:
        72px;

    height:
        7px;

    z-index:
        -1;

    background:
        #E4E3DD;

    border-radius:
        999px;

    box-shadow:
        none;

    transform:
        none;
}


.enl-accordion-lessons-section--locked
.enl-accordion-lessons-content {
    display:
        none !important;
}


/* =========================================================
   8. СОДЕРЖИМОЕ АККОРДЕОНА
   ========================================================= */

.enl-accordion-lessons-content {
    display:
        none !important;

    width:
        100% !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    /*
     * Чуть больше воздуха
     * между заголовком и первым уроком.
     */

    padding:
        16px 8px 2px 10px !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.enl-accordion-lessons-section--open
> .enl-accordion-lessons-content,

.enl-accordion-lessons-content--visible {
    display:
        block !important;
}


/* =========================================================
   9. ШТАТНЫЕ СПИСКИ GETCOURSE
   ========================================================= */

.enl-accordion-lessons-content
.lesson-list,

.enl-accordion-lessons-content
.stream-table,

.enl-accordion-lessons-content
.training-list,

.enl-accordion-lessons-content
.enl-accordion-lessons-grid {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.enl-accordion-lessons-content
.enl-accordion-lessons-grid {
    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        8px !important;
}


/* =========================================================
   10. ШТАТНЫЕ СОСТОЯНИЯ GETCOURSE
   ========================================================= */

/*
 * ВАЖНО:
 * .user-state-bg НЕ скрываем —
 * в GetCourse этот элемент может быть
 * контейнером содержимого самого урока.
 *
 * Состояния GC не должны влиять
 * на наш дизайн, но их DOM сохраняем,
 * потому что JS использует
 * user-state-accomplished для определения
 * выполненного задания.
 */


/*
 * Убираем только штатную иконку состояния,
 * если она присутствует отдельным элементом.
 */

.enl-accordion-lessons-content
.state-icon-block {
    display:
        none !important;
}


/*
 * Не скрываем и не обнуляем
 * элементы user-state-*.
 *
 * Их внешний вид всё равно закрывается
 * нашей собственной карточкой,
 * а классы нужны JS для определения
 * состояния выполненного задания.
 */


/* =========================================================
   11. СТРОКА GETCOURSE
   ========================================================= */

.enl-accordion-lessons-content
.enl-accordion-lesson-row {
    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.enl-accordion-lessons-content
.enl-accordion-lesson-row > td {
    display:
        block !important;

    width:
        100% !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.enl-accordion-lessons-content
.enl-accordion-lesson-row > td > div {
    width:
        100% !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* =========================================================
   12. КАРТОЧКА УРОКА
   ========================================================= */

.enl-accordion-lesson-card {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        58px !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #292929 !important;

    background:
        #FFFFFF !important;

    border:
        1px solid
        rgba(41, 41, 41, 0.07) !important;

    border-radius:
        11px !important;

    box-shadow:
        0 2px 8px
        rgba(41, 41, 41, 0.05) !important;

    text-decoration:
        none !important;

    overflow:
        hidden !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}


/* =========================================================
   13. СКРЫВАЕМ ИСХОДНУЮ НАЧИНКУ GC
   ========================================================= */

.enl-accordion-lesson-card
.enl-accordion-lesson-gc-original {
    display:
        none !important;
}


/* =========================================================
   14. ВНУТРЕННЯЯ КАРТОЧКА
   ========================================================= */

.enl-accordion-lesson-visual {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        50px !important;

    width:
        100% !important;

    min-height:
        58px !important;

    box-sizing:
        border-box !important;

    border-radius:
        11px !important;

    overflow:
        hidden !important;
}


/* =========================================================
   15. НАЗВАНИЕ
   ========================================================= */

.enl-accordion-lesson-title {
    display:
        flex !important;

    align-items:
        center !important;

    min-width:
        0 !important;

    box-sizing:
        border-box !important;

    padding:
        11px
        16px
        11px
        42px !important;

    color:
        #303030 !important;

    font-family:
        "Raleway",
        Arial,
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        600 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -0.01em !important;

    text-decoration:
        none !important;

    overflow-wrap:
        anywhere !important;
}


/* =========================================================
   16. ЦВЕТНОЙ ТОРЕЦ
   ========================================================= */

.enl-accordion-lesson-side {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        50px !important;

    min-height:
        100% !important;

    box-sizing:
        border-box !important;

    background:
        #DDDD84 !important;
}


/* =========================================================
   17. СТРЕЛКА УРОКА
   ========================================================= */

.enl-accordion-lesson-arrow {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        28px !important;

    height:
        28px !important;

    box-sizing:
        border-box !important;

    color:
        #161616 !important;

    background:
        #FFFFFF !important;

    border-radius:
        50% !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        17px !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    transition:
        transform 0.18s ease !important;
}


/* =========================================================
   18. СОСТОЯНИЕ УРОКА — ПО УМОЛЧАНИЮ
   ========================================================= */

/*
 * Любое состояние, кроме реально
 * выполненного задания, выглядит одинаково.
 */

.enl-accordion-lesson-card::before {
    content:
        "✓" !important;

    position:
        absolute !important;

    z-index:
        5 !important;

    top:
        50% !important;

    left:
        13px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        20px !important;

    height:
        20px !important;

    box-sizing:
        border-box !important;

    color:
        #9A9A9A !important;

    background:
        #E9E9E9 !important;

    border-radius:
        50% !important;

    box-shadow:
        0 1px 3px
        rgba(22, 22, 22, 0.11) !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    transform:
        translateY(-50%) !important;
}


/* =========================================================
   19. ЗАДАНИЕ ВЫПОЛНЕНО
   ========================================================= */

/*
 * JS ставит этот класс только тогда,
 * когда GetCourse дал уроку штатный
 * user-state-accomplished.
 */

.enl-accordion-lesson-card--complete::before {
    color:
        #656700 !important;

    background:
        #DDDD84 !important;

    box-shadow:
        0 1px 4px
        rgba(101, 103, 0, 0.18) !important;
}


/* =========================================================
   20. HOVER УРОКА
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .enl-accordion-lesson-card:hover {
        transform:
            translateY(-1px) !important;

        box-shadow:
            0 4px 12px
            rgba(41, 41, 41, 0.08) !important;
    }


    .enl-accordion-lesson-card:hover
    .enl-accordion-lesson-arrow {
        transform:
            translateX(2px) !important;
    }

}


/* =========================================================
   21. МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 600px) {

    .enl-accordion-lessons-section {
        margin:
            17px 0 22px;
    }


    .enl-accordion-lessons-toggle {
        min-height:
            46px;

        padding:
            7px 3px 9px 0 !important;
    }


    .enl-accordion-lessons-toggle::after {
        height:
            6px;

        width:
            58px;
    }


    .enl-accordion-lessons-section--open
    > .enl-accordion-lessons-toggle::after {
        width:
            82px;
    }


    .enl-accordion-lessons-section--open
    > .enl-accordion-lessons-toggle {
        top:
            5px;

        padding-top:
            9px !important;

        padding-bottom:
            10px !important;
    }


    .enl-accordion-lessons-section--locked
    > .enl-accordion-lessons-toggle {
        background-size:
            30px 30px !important;

        background-position:
            right 4px center !important;
    }


    .enl-accordion-lessons-content {
        padding:
            13px
            2px
            2px
            4px !important;
    }


    .enl-accordion-lessons-content
    .enl-accordion-lessons-grid {
        gap:
            7px !important;
    }


    .enl-accordion-lesson-card,
    .enl-accordion-lesson-visual {
        min-height:
            54px !important;
    }


    .enl-accordion-lesson-card {
        border-radius:
            10px !important;
    }


    .enl-accordion-lesson-visual {
        grid-template-columns:
            minmax(0, 1fr)
            46px !important;

        border-radius:
            10px !important;
    }


    .enl-accordion-lesson-title {
        padding:
            9px
            12px
            9px
            38px !important;

        font-size:
            15px !important;
    }


    .enl-accordion-lesson-side {
        width:
            46px !important;
    }


    .enl-accordion-lesson-arrow {
        width:
            26px !important;

        height:
            26px !important;

        font-size:
            16px !important;
    }


    .enl-accordion-lesson-card::before {
        left:
            11px !important;

        width:
            18px !important;

        height:
            18px !important;

        font-size:
            11px !important;
    }

}

/* ==========================================
   СПИСОК УРОКОВ: убираем данные GetCourse
   ========================================== */

/* Скрываем заголовок, в который скопировались все данные целиком */
.enl-accordion-lessons-content
.enl-accordion-lesson-title {
  display: none !important;
}

/* Возвращаем родной контейнер с названием урока */
.enl-accordion-lessons-content
.info.enl-accordion-lesson-gc-original {
  display: block !important;
  position: static !important;
  grid-column: 1 !important;

  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

.enl-accordion-lessons-content
.info.enl-accordion-lesson-gc-original table {
  width: 100% !important;
}

/* Скрываем дату, статусы, “просмотрено” и описание */
.enl-accordion-lessons-content .user-state-label,
.enl-accordion-lessons-content .lesson-date,
.enl-accordion-lessons-content .lesson-list__video-watched,
.enl-accordion-lessons-content .description {
  display: none !important;
}

/* Оставляем и оформляем только настоящее название */
.enl-accordion-lessons-content .info .link.title {
  display: block !important;

  margin: 0 !important;
  padding: 11px 16px 11px 42px !important;

  color: #303030 !important;
  font-family: Raleway, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
}

/* Сохраняем справа вашу стрелку */
.enl-accordion-lessons-content
.enl-accordion-lesson-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 50px !important;
}

.enl-accordion-lessons-content
.enl-accordion-lesson-visual {
  display: contents !important;
}

.enl-accordion-lessons-content
.enl-accordion-lesson-side {
  grid-column: 2 !important;
  grid-row: 1 !important;
}


/* ==========================================
   НЕДОСТУПНЫЕ УРОКИ
   ========================================== */

.enl-accordion-lessons-content
.enl-accordion-lesson-row.user-state-not_reached
.enl-accordion-lesson-card,

.enl-accordion-lessons-content
.enl-accordion-lesson-row.user-state-not_available
.enl-accordion-lesson-card {
  opacity: 0.48 !important;
  filter: grayscale(0.25) saturate(0.45) !important;
}

/* Закрытые разделы аккордеона */
.enl-accordion-lessons-section--locked {
  opacity: 0.48 !important;
}